<template>
  <div class="usercard">
    <div class="signup-pic"></div>
    <div class="avatar">
      <div class="avatar-border">
        <!-- <input type="file"  @change="beforeUpload" /> -->
        <input
          ref="fileInput"
          type="file"
          style="display: none"
          @change="uploadAvator"
        />
        <el-icon @click="activeInput" v-if="!isAvatorUploaded">
          <Plus />
        </el-icon>
        <el-icon @click="activeInput" v-else>
          <Select />
        </el-icon>
      </div>
      <div>
        <span v-if="!isAvatorUploaded">上传头像</span>
        <span v-else>上传成功</span>
      </div>
    </div>
    <input placeholder="用户名" v-model="signupinfo.username" />
    <input
      type="password"
      placeholder="设置密码"
      v-model="signupinfo.password"
    />
    <input
      type="password"
      placeholder="请确认密码"
      v-model="signupinfo.password2"
    />
    <div class="sex" style="color: #bfbdbe">
      <span class="hint-text">请选择你的性别：</span>
      <label class="radio-label" style="">
        <input type="radio" v-model="signupinfo.sex" value="男" />
        <span class="radio-custom"></span>
        <span class="radio-text">男</span>
      </label>
      <label class="radio-label">
        <input type="radio" v-model="signupinfo.sex" value="女" />
        <span class="radio-custom"></span>
        <span class="radio-text">女</span>
      </label>
    </div>
    <input placeholder="电话号码" v-model="signupinfo.telephone" />
    <input placeholder="邮箱" v-model="signupinfo.email" />

    <div class="auth">
      <input placeholder="验证码" v-model="signupinfo.code" />
      <el-button style="" color="#ff7d00" @click="sendCode"
        ><span style="color: white">获取验证码</span></el-button
      >
    </div>

    <el-button style="margin-top: 10px" color="#ff7d00" @click="gosignup()"
      ><span style="color: white">确认</span></el-button
    >
    <div class="gologin" id="gologin" @click="changesignup">
      已有账号？立即登录
    </div>
  </div>
</template>

<script setup lang="ts">
import request from '@/api/useRequests';
import { ref } from 'vue';
import { userinfo } from '@/stores/counter';
import usesignup from '@/api/getSignup';
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
const { signup, codeAuth } = usesignup();
const user = userinfo();
const signupinfo = user.signupInfo;

let isAvatorUploaded = ref(false);
const fileInput = ref(null);
function activeInput() {
  if (fileInput.value) {
    // 调用按钮的 click 方法
    console.log('click');
    console.log(fileInput.value);
    fileInput.value.click();
  }
}
function uploadAvator(event: Event) {
  console.log('input的change被调用');
  console.log(event.target);
  const file: File = (event.target as HTMLInputElement).files?.[0];
  if (checkAvator(file)) {
    upload(file);
  }
}
function checkAvator(file: File) {
  console.log('开始检查图片');
  const isImage = file.type.startsWith('image/');
  if (!isImage) {
    ElMessage({
      showClose: true,
      message: '请传入图片类型的文件',
      type: 'error',
    });
    return false;
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    ElMessage({
      showClose: true,
      message: '图片大小不能超过2M',
      type: 'error',
    });
    return false;
  }
  console.log('图片符合要求');
  return true;
}

async function upload(file: File) {
  console.log('准备上传图片');
  console.log(file);
  try {
    const res = await axios.post(
      '/smms-api/upload',
      {
        smfile: file,
      },
      {
        headers: {
          Authorization: 'Basic DJoOssUKmVc1ssN4LG6FT5Fy8bxu7h4R',
          'Content-Type': 'multipart/form-data',
        },
      }
    );

    if (res.data.success) {
      signupinfo.avator = res.data.data.url;
      isAvatorUploaded.value = true;
      ElMessage({
        showClose: true,
        message: '头像上传成功',
        type: 'success',
      });
    } else {
      ElMessage({
        showClose: true,
        message: '上传头像失败',
        type: 'error',
      });
    }
  } catch (e: any) {
    ElMessage({
      showClose: true,
      message: '上传头像：系统错误',
      type: 'error',
    });
  }
}

function sendCode() {
  if (!signupinfo.email) {
    ElMessage({
      showClose: true,
      message: '请输入验证邮箱！',
      type: 'error',
    });
  } else {
    codeAuth(signupinfo.email, '注册');
  }
}
function gosignup() {
  if (signupinfo.password2 != signupinfo.password) {
    ElMessage({
      showClose: true,
      message: '两次输入密码不一致！',
      type: 'error',
    });
  } else {
    signup();
  }
}

function changesignup() {
  user.usercardPage = 0;
}
</script>

<style scoped>
.usercard {
  width: 460px;
  height: fit-content;
  background-color: white;
  /* background-color: red; */
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  border-radius: 10px;
  box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
}

.signup-pic {
  background-image: url(/assets/imgs/signup.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 70px;
  width: 160px;
  margin: 50px 0 20px;
}

.avatar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #cdcdcd;
  cursor: pointer;
}

.avatar-border {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 3px #cdcdcd solid;
}

.usercard > input {
  display: flex;
  width: calc(70%);
  margin: 10px;
  padding: 5px 10px;
  height: 40px;
  border: 1px #bfbdbe solid;
  border-radius: 5px;
  font-size: 18px;
}

.usercard > input::placeholder {
  color: #bfbdbe;
}

.usercard > input:focus {
  outline: none;
  /* 可选，去除选中时的默认外边框 */
}

.gologin {
  color: #c6c0c0;
  margin: 20px 0 40px;
  text-decoration: underline;
  cursor: pointer;
}

.auth {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.auth > input,
.auth > el-button {
  /* 共享样式 */
  display: flex;
  width: calc(70%);
  margin: 10px;
  padding: 5px 10px;
  height: 40px;
  border: 1px #bfbdbe solid;
  border-radius: 5px;
  font-size: 18px;
}

.auth > input::placeholder {
  color: #bfbdbe;
}

.auth > input:focus {
  outline: none;
}

.auth > el-button {
  /* 按钮样式 */
}
</style>
